<template>
  <div class="bg">
    <div class="name">
      <p > <font face="隶书" size="90px" color="#777777">欢迎使用松果图书管理系统</font></p>
      <p > <font face="黑体" size="10px" color="#777777">Welcome to SG Book Control System</font></p>
    </div>

    <div id="login">
      <div style="text-align: center;" id="log"><img src="../assets/songguo.png" class="logpng"></div>
      <br>
      用户名：         <input type="text" v-model="userObj.username" placeholder="请输入用户名"/><br>
      密码：&nbsp &nbsp<input type="text" v-model="userObj.password" placeholder="请输入密码"/><br>

      <button @click="login" >登录</button>

      <select v-model:value="selected" >
        <option >普通用户</option>
        <option >管理员</option>
      </select><br>

      <center><div class="re"><router-link :to="{name:'register'}">注册</router-link></div></center>

    </div>

  </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: 'login',
        data () {
            return {
                userObj:{
                    username:'',
                    password:''
                },
                selected:"普通用户",
            }
        },

        methods: {
            login () {
                let _this = this
                if (this.userObj.username===''||this.userObj.password==='') {
                    alert('账号或密码不能为空')
                } else {
                    axios({
                        method: 'post',
                        url: this.baseURL + 'login.ctl',
                        data : _this.userObj
                    }).then(res => {
                        this.userObj = {
                            username: _this.userObj.username,
                            password: _this.userObj.password
                        }
                        console.log(res.data)
                        if (res.data.message === '登录失败') {
                            alert('用户名或密码不匹配')
                        } else if (res.data.message === '数据库操作异常') {
                            alert('数据库操作异常')
                        }  else if (res.data.error === '您已经被加入黑名单') {
                            alert('您已被加入黑名单')
                        } else if (res.data.message === '网络异常') {
                            alert('网络异常')
                        } else {
                            let item = res.data
                            if (this.selected === item.role && this.selected === '普通用户'){
                                _this.$router.push('/home')

                                window.localStorage.setItem('userName', res.data.actor.name);
                                window.localStorage.setItem('userId', res.data.actor.id)
                                return
                            } else if (this.selected === item.role && this.selected === '管理员'){
                                console.log(item)
                                _this.$router.push('/mhome')
                                window.localStorage.setItem('userName', res.data.actor.name),
                                window.localStorage.setItem('userId', res.data.actor.id)
                                return
                            } else {
                                alert('身份不匹配')
                            }
                        }
                    }).catch(error => {
                        alert('账号或密码错误')
                        console.log(error)
                    })
                }
            }
        }

    }
</script>

<style scoped>
  .logpng{ width: 60px;height:60px}
  #log{padding-top: 10px}
  .name{
    width: 100%;
    text-align: center;
    padding-top: 20px;

  }
  .bg{width:100%; height:660px; background-color: #EAEDE7}

  #login{
    background-color: #E6E6E6;
    width: 415px;
    height: 337px;
    margin:50px auto;
    z-index: 1;
    box-shadow:0 0 30px rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    text-align: center;
  }
  #login input{
    margin-bottom:40px;
    line-height: 25px;
  }
  #login input:focus{
    box-shadow:0 0 10px rgba(0, 0, 0, 0.4);
  }
  #login button{
    width:100px;
    margin-left: 20px;
    border-radius: 5px;
    box-shadow:0 0 5px rgba(0, 0, 0, 0.4);;
  }
  .re{
    color: #99A0A8;
    width:100px;
    margin-left: 20px;
    margin-top: 15px;
    border-radius: 5px;
    box-shadow:0 0 5px rgba(0, 0, 0, 0.4);}
</style>
